<template>
  <div class="article-page">
    <div class="banner">
      <div class="container">
        <h1>{{article.title}}</h1>
        <article-meta :article='article' :user='user'/>
      </div>
    </div>
    <div class="container page">
      <div class="row article-content">
        <div class="col-md-12">
          <div v-html="article.body"></div>
          <ul class="tag-list">
            <li class="tag-default tag-pill tag-outline" v-for="tag in article.tagList" :key="tag">
              {{tag}}
            </li>
          </ul>
        </div>
      </div>
      <hr />
      <div class="article-actions">
        <article-meta :article='article' :user='user' />
      </div>
      <div class="row">
        <article-comments :article='article' :user="user" />
      </div>
    </div>
  </div>
</template>
<script>
import {getArticle,deleteArticle} from '@/api/article'
import MarkdoenIt from 'markdown-it'
import ArticleMeta from './components/article-meta.vue'
import ArticleComments from './components/article-comments.vue'
import {mapState} from 'vuex'

export default {
  components: { ArticleMeta,ArticleComments },
  name:"ArticleIndex",
  async asyncData({params}){
    const {data} = await getArticle(params.slug)
    const {article} = data
    // console.log(article);
    article.followDisabled=false
    article.favoriteDisabled=false
    const md =new MarkdoenIt
    article.body=md.render(article.body)
    // console.log(article)
    return {
      article
    }
  },
  head(){
    return {
      title:`${this.article.title} - Conduit`,
      meta:[
        {hid:'description',name:'description',content:this.article.description}
      ]
    }
  },
  computed:{
    ...mapState(['user'])
  }
}
</script>